import { useState, useEffect } from 'react';
import './dingdan.less';
import { Dropdown, Button, MessagePlugin, Input, Table, Dialog } from 'tdesign-react';
import moment from'moment';
import 'tdesign-react/es/style/index.css';
import { Icon } from 'tdesign-icons-react';

import axios from 'axios';



export default function Dingdan() {
    let [list, setlist] = useState([]);
    let [value, setValue] = useState([]);
    let [visibleWarning, setVisibleWarning] = useState(false);
    let [delid, setdelid] = useState('');
    let [visible, setVisible] = useState(false);
    let [findid, setfindid] = useState('');
    let [findlist, setfindlist] = useState({});
    let [userlist, setuserlist] = useState([]);


    useEffect(() => {
        getlist();
        user();
    }, []);
    //展示订单列表
    let getlist = async () => {
        let { data } = await axios.get('http://localhost:3000/order');
        if(data.code === 200){
            setlist(data.data);
        }
    };
    //搜索订单
    let find = async () => {
        let { data } = await axios.get('http://localhost:3000/findorder',{params:{name:value}});
        if(data.code === 200){
            setlist(data.data);
        }
    };
    let find2 = async (id) => {
        let { data } = await axios.get('http://localhost:3000/findorder2',{params:{_id:id}});
        if(data.code === 200){
            setfindlist(data.data);
        }
    };
    //删除订单
    let del=async()=>{
        console.log(delid);
        let {data} = await axios.post('http://localhost:3000/delorder',{_id:delid});
        if(data.code === 200){
            MessagePlugin.success('删除成功');
            setVisibleWarning(false);
            getlist();
        }
    }
    // 关闭删除提示
    let onCloseWraing=()=>{
        setVisibleWarning(false);
    }
    //个人信息表
    let user=async()=>{
        let {data} = await axios.get('http://localhost:3000/userinfo');
        if(data.code === 200){
            setuserlist(data.data);
        }
    }
    
    const data = [];
    const total = list.length;

    const [stripe, setStripe] = useState(false);
    const [bordered, setBordered] = useState(false);
    const [hover, setHover] = useState(false);
    const [tableLayout, setTableLayout] = useState(false);
    const [size, setSize] = useState('medium');
    const [showHeader, setShowHeader] = useState(true);


    const table = (
        <Table
          data={list}
          columns={[
            {
              colKey: 'name',
              title: '名称',
            },
            {
              colKey: 'price',
              title: '价格',
            },
            {
              colKey: 'ordernum',
              title: '订单编号',
            },
            {
              colKey: 'createtime',
              title: '创建时间',
              ellipsis: true,
              // 在表格渲染时，对时间数据进行格式化展示
              render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
            },
            {
              colKey: 'paytime',
              title: '支付时间',
              ellipsis: true,
              // 在表格渲染时，对时间数据进行格式化展示
              render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
            },
            {
              colKey: 'paytype',
              title: '支付方式',
            },
            {
                title: '操作',
                colKey: 'operation',
                cell: (h)=>{
                    return <div>
                        <Button style={{marginRight: '10px'}} onClick={()=>{setVisible(true);find2(h.row._id)}}>查看</Button>
                        <Button onClick={()=>{setdelid(h.row._id);setVisibleWarning(true)}}>删除</Button>
                    </div>

                }
            }
          ]}
          rowKey="index"
          verticalAlign="top"
          size={size}
          bordered={bordered}
          hover={hover}
          stripe={stripe}
          showHeader={showHeader}
          tableLayout={tableLayout ? 'auto' : 'fixed'}
          rowClassName={({ rowIndex }) => `${rowIndex}-class`}
          cellEmptyContent={'-'}
          resizable
          // 与pagination对齐
          pagination={{
            defaultCurrent: 2,
            defaultPageSize: 5,
            total,
            showJumper: true,
            onChange(pageInfo) {
              console.log(pageInfo, 'onChange pageInfo');
            },
            onCurrentChange(current, pageInfo) {
              console.log(current, pageInfo, 'onCurrentChange current');
            },
            onPageSizeChange(size, pageInfo) {
              console.log(size, pageInfo, 'onPageSizeChange size');
            },
          }}
          onPageChange={(pageInfo) => {
            console.log(pageInfo, 'onPageChange');
          }}
          onRowClick={({ row, index, e }) => {
            console.log('onRowClick', {
              row,
              index,
              e,
            });
          }}
        />
      );
    return (
        <div>
            <div className='top'>
                <Input
                    placeholder="请输入内容"
                    clearable
                    onChange={(value) => {
                        setValue(value);
                    }}
                    onClear={() => {
                        console.log('onClear');
                    }}
                    style={{ width: 200 }}
                />
                <Button onClick={()=>{find()}}>搜索</Button>
            </div>
            <div>
                {table}
            </div>
            <Dialog theme="warning" body={'确认要删除吗？'} header="警示" cancelBtn={false} onConfirm={()=>del()} visible={visibleWarning} onClose={onCloseWraing}></Dialog>
            <Dialog
                width="800"
                header="订单详情"
                visible={visible}
                cancelBtn={null}
                confirmBtn={null}
                onCloseBtnClick={() => {
                    setVisible(false);
                }}
            >
                <p>名称：{findlist.name}</p>
                <p>订单编号：{findlist.ordernum}</p>
                <p>订单金额：{findlist.orderamount}</p>
                <p>订单时间：{moment(findlist.createtime).format('YYYY-MM-DD HH:mm:ss')}</p>
                <p>订单状态：{findlist.status}</p>
                <p>支付时间：{moment(findlist.paytime).format('YYYY-MM-DD HH:mm:ss')}</p>
                <p>支付方式：{findlist.paytype}</p>
                <p>主治医师：
                    {
                        userlist.filter(i=>i._id===findlist.userinfo).map((item)=>{
                            return <span key={item._id}>{item.name}</span>
                        })

                    }

                </p>
            </Dialog>
        </div>
    );
}